<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{block name="title"}标题{/block}</title>

    <link rel="stylesheet" href="/static/amazeui/css/amazeui.min.css">
</head>
<body>

<!--在这里编写你的代码-->
<link rel="stylesheet" href="/static/index/mails/style.css">
<div id="app">
    <div class="swarp">
        <form class="am-form" id="add_product">
            <fieldset>
                <legend>抓取产品评论</legend>

                <div class="am-form-group">
                    <label for="">链接地址</label>
                    <input type="text" class="" id="url" placeholder="链接地址" required />
                </div>

                <div class="am-form-group">
                    <label for="">截止日期</label>
                    <input type="text" class="" id="date" placeholder="截止日期" data-am-datepicker readonly required />
                </div>

                <p>
                    <input type="hidden" id="fd" value="" />
                    <button type="button" id="submit" class="am-btn am-btn-primary">提交</button>
                    <a type="button" v-if="hasData" id="download" class="am-btn am-btn-success" v-bind:href="url">下载文件</a>
                </p>
            </fieldset>
        </form>
    </div>

    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd"> 抓取信息 ...</div>
            <div class="am-modal-bd" id="msg-bd" style="max-height: 350px; overflow: auto;">
                <table class="am-table">
                    <thead>
                    <tr>
                        <th>#ID</th>
                        <th>页码</th>
                        <th>作者</th>
                        <th>评星</th>
                        <th>日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="d in msgs">
                        <td>{{ d.index }}</td>
                        <td>{{ d.page }}</td>
                        <td>{{ d.author }}</td>
                        <td>{{ d.starts }}</td>
                        <td>{{ d.date }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>

</div>

<script src="/static/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/amazeui/js/amazeui.min.js"></script>
<script type="text/javascript" src="/static/vue/vue.js"></script>

<script type="text/javascript">
    var reflash = false;
    var downloading = false;
    var app = new Vue({
        el: '#app',
        data: {
            url: '',
            hasData: false,
            msgs:[],
        },
        created:function(){
            // 初始化 webSocket
            this.socket();

        },
        methods :{
            onMsg(evt){
                switch (evt.msgType){
                    case 'init':
                        init_data(evt.data);
                        break;
                    case 'msg':
                        if(reflash){
                            this.msgs = [];
                            reflash = false;
                        }
                        this.msgs.push(evt.data);
                        var div = document.getElementById('msg-bd');
                        div.scrollTop = div.scrollHeight;
                        break
                }
            },
            socket(){
                try {
                    var socket = new WebSocket('{$wsHost}');
                }catch (e) {
                    return false;
                }
                var _this = this;
                socket.onmessage=function(evt){
                    var data = $.parseJSON(evt.data);
                    _this.onMsg(data);
                }
            }
        }
    });

    $(document).ready(function () {
        $('#submit').click(function () {
            var v = $('#add_product').validator('validateForm');

            if(!v.valid){
                return false;
            }

            show_alert();
            if(downloading){
                return false;
            }

            downloading = true;

            var data = {
                url: $('#url').val(),
                date: $('#date').val(),
                fd: $('#fd').val(),
            };

            $.ajax({
                url:"<?php echo url('index/Comments/get_comments'); ?>",
                //url:"<?php echo url('index/Comments/add_list'); ?>",
                data: data,
                dataType:'json',
                type:'post',
                async: true,
                success: function (res) {
                    if(0 == res.ack){
                        // 显示下载按钮
                        app.url = res.msg;
                        app.hasData = true;
                    }

                    hide_alert();
                    downloading = false;
                    //reflash = true;
                },
                error: function (res) {
                    hide_alert();
                    downloading = false;
                }
            })

        });

    })

    function init_data(fd) {
        $('#fd').val(fd);
    }

    function hide_alert() {
        $("#my-alert").modal('close');
        return true;
    }

    function show_alert() {
        $("#my-alert").modal('open');
        return true;
    }
</script>
</body>
</html>
